{% extends "base.html" %}

{% block title %}仪表盘 - 在线跑批系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>仪表盘</h1>
    <div>
        <span class="text-muted">欢迎回来, {{ user.username }}</span>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-md-2 mb-3">
        <div class="card bg-primary text-white h-100">
            <div class="card-body">
                <h5 class="card-title">总服务器</h5>
                <h2 class="display-4">{{ total_servers }}</h2>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{% url 'server_list' %}" class="text-white">查看详情</a>
                <i class="fas fa-server"></i>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card bg-secondary text-white h-100">
            <div class="card-body">
                <h5 class="card-title">总任务数</h5>
                <h2 class="display-4">{{ total_tasks }}</h2>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{% url 'task_list' %}" class="text-white">查看详情</a>
                <i class="fas fa-tasks"></i>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card bg-warning text-white h-100">
            <div class="card-body">
                <h5 class="card-title">运行中任务</h5>
                <h2 class="display-4">{{ running_tasks }}</h2>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{% url 'task_list' %}" class="text-white">查看详情</a>
                <i class="fas fa-spinner"></i>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card bg-success text-white h-100">
            <div class="card-body">
                <h5 class="card-title">已完成任务</h5>
                <h2 class="display-4">{{ completed_tasks }}</h2>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{% url 'log_list' %}" class="text-white">查看详情</a>
                <i class="fas fa-check-circle"></i>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card bg-danger text-white h-100">
            <div class="card-body">
                <h5 class="card-title">已失败任务</h5>
                <h2 class="display-4">{{ failed_tasks }}</h2>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{% url 'log_list' %}" class="text-white">查看详情</a>
                <i class="fas fa-exclamation-circle"></i>
            </div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row mb-4">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">任务状态分布</h5>
            </div>
            <div class="card-body">
                {% if status_chart %}
                    {{ status_chart|safe }}
                {% else %}
                    <p class="text-center text-muted">暂无数据</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">服务器任务数量</h5>
            </div>
            <div class="card-body">
                {% if server_chart %}
                    {{ server_chart|safe }}
                {% else %}
                    <p class="text-center text-muted">暂无数据</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">过去7天任务执行情况</h5>
            </div>
            <div class="card-body">
                {% if daily_chart %}
                    {{ daily_chart|safe }}
                {% else %}
                    <p class="text-center text-muted">暂无数据</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 最近任务和日志 -->
<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">最近任务</h5>
                <a href="{% url 'task_list' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>名称</th>
                                <th>服务器</th>
                                <th>状态</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in recent_tasks %}
                                <tr>
                                    <td>{{ task.name }}</td>
                                    <td>{{ task.server.name }}</td>
                                    <td>
                                        {% if task.status == 'running' %}
                                            <span class="badge bg-warning">运行中</span>
                                        {% elif task.status == 'completed' %}
                                            <span class="badge bg-success">已完成</span>
                                        {% elif task.status == 'failed' %}
                                            <span class="badge bg-danger">已失败</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ task.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ task.created_at|date:"Y-m-d H:i" }}</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">暂无任务</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">最近日志</h5>
                <a href="{% url 'log_list' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>任务</th>
                                <th>状态</th>
                                <th>开始时间</th>
                                <th>执行人</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in recent_logs %}
                                <tr>
                                    <td>{{ log.task.name }}</td>
                                    <td>
                                        {% if log.status == 'running' %}
                                            <span class="badge bg-warning">运行中</span>
                                        {% elif log.status == 'completed' %}
                                            <span class="badge bg-success">已完成</span>
                                        {% elif log.status == 'failed' %}
                                            <span class="badge bg-danger">已失败</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ log.started_at|date:"Y-m-d H:i" }}</td>
                                    <td>{{ log.started_by.username }}</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">暂无日志</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
